<template>
  <section>
    <common-map-dialog :mapDialogVisible="mapDialogVisible"
                @close="handleCloseDialog"
                @closed="handleClosedDialog"
                style="width: 340px;"
                title="兴趣点信息">
      <section v-loading="mapDialogLoading">
        <template v-if="poiInfo">
          <section class="map__poi__info--item">
            <section class="map__poi__info--title">
              <div class="dian"></div>
              兴趣点ID
            </section>
            <section class="map__poi__info--content">{{poiInfo.id}}</section>
          </section>
          <section class="map__poi__info--item">
            <section class="map__poi__info--title">
              <div class="dian"></div>
              兴趣点类型
            </section>
            <section class="map__poi__info--content">{{poiInfo.properties.kind}}</section>
          </section>
          <section class="map__poi__info--item">
            <section class="map__poi__info--title">
              <div class="dian"></div>
              兴趣点名称
            </section>
            <section class="map__poi__info--content">{{poiInfo.properties.name}}</section>
          </section>
        </template>

        <template v-else>
          <avue-empty :desc="SystemPrompt.Message.noData">
            <el-button @click.stop="handelLoadWhDetail" size="small" type="text">
              {{SystemPrompt.Button.refresh}}
            </el-button>
          </avue-empty>
        </template>
      </section>
    </common-map-dialog>
  </section>
</template>

<script>
import { mapDialogMixin } from '@/mixins/mapDialogMixin'
export default {
  name: 'map-poi-info',
  mixins: [mapDialogMixin],
  props: {
    poiInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
  },
  methods: {
    handleClosedDialog() {
    }
  }
}
</script>
